<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>Inline test</title>
    <script type="text/javascript" src="../../../../x3dom-include.js"></script>

<script type="text/javascript">
	var test = function() {	
		document.getElementById('test__color1').setAttribute('diffuseColor', '1 0 0.5');
		document.getElementById('test__color2').setAttribute('diffuseColor', '0 1 1');
		document.getElementById('test__color3').setAttribute('diffuseColor', '0.1 1 .03');
		document.getElementById('test__color4').setAttribute('diffuseColor', '0.7 1 0');
	}
	
	var changeColor = function(event) {
		window.setTimeout( function () {
		    document.getElementById('test__color1').setAttribute('diffuseColor', '1 0 1');
		    console.log('load event: ', event);
		}, 2000);
		//alert('load');
	}
	var showError = function(event) {	
		console.log('error event: ', event);
	}
	var init = function() {	
		document.getElementById('inline1').addEventListener('load', changeColor, false );
		document.getElementById('inline1').setAttribute('url', '"skipme.x3d" "./inlineTest.x3d"');
		
		document.getElementById('inline2').addEventListener('error',showError, false );
		document.getElementById('inline2').setAttribute('url', '"checkme.x3d" "./error.x3d"');
	}
	
</script>
</head>
<body onload="init();">       
    <x3d width="700px" height="700px" showStat="true" showLog="true">
		<scene>
			<inline id="inline1" nameSpaceName='test' url=''></inline>
            <inline id="inline2" nameSpaceName='error' url=''></inline>
			<!--inline onload="changeColor();" nameSpaceName='test' url='media/data/inlineTest.x3d'></inline-->
			<!--inline onerror="showError();" nameSpaceName='showError' url='media/data/error.x3d'></inline-->
		</scene>
	</x3d>
	<input id="changeColor" type="submit" value="changeColor" onClick="test();" />
</body>
</html>
